import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux, Link } from 'dva/router';
import moment from 'moment';
import {
    Row, Col, Card, Form, Input,
    Select, Icon, Button, Dropdown, Menu,
    InputNumber, DatePicker, Modal, message,
    Badge, Divider, Tag, Table
} from 'antd';
import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './CompletedTask.less';

const FormItem = Form.Item;
const { Option } = Select;
const { MonthPicker, RangePicker } = DatePicker;
/*
  审批管理的已办任务界面
*/


@connect(({ pendingTask }) => ({
    pendingTask,
    // loading: loading.models.rule,
}))
@Form.create()
export default class CompletedTask extends PureComponent {
    state = {
        dataTimeFlag: false,
        guaranteeChannelList: [],
        guaranteeKey: '',
        searchFilters: {
            custName: '',
            branchName: '',
            startDate: '',
            endDate: '',
        },
    };
    componentDidMount() {
        // console.log("Completed Task . componentDidMount");
        const { dispatch } = this.props;
        // console.log("Completed Task . componentDidMount",dispatch);
        dispatch({
            type: 'pendingTask/fetch',
            payload: { offset: 0, limit: 10, state: 2 },
        });
        // console.log("Completed Task . componentDidMount 1 ");
        dispatch({
            type: 'pendingTask/getChannelList',
            // payload: { offset: 0, limit: 10, state: 2 },
            callback: () => {
                const { pendingTask: { guaranteeChannelList } } = this.props;
                this.setState({
                    guaranteeChannelList: guaranteeChannelList,
                })
            }
        });
        // console.log("Completed Task . componentDidMount 2");
    }

    handleStandardTableChange = (e) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'pendingTask/fetch',
            payload: {
                offset: (e.current - 1) * e.pageSize,
                limit: e.pageSize,
                state: 2,
                custName: this.state.searchFilters.custName,
                orgName: this.state.searchFilters.branchName,
                createTimeBegin: this.state.searchFilters.startDate,
                createTimeEnd: this.state.searchFilters.endDate,
            }
        });
        // dispatch({
        //     type: 'pendingTask/fetch',
        //     payload: { offset: (e.current - 1) * e.pageSize, limit: e.pageSize, state: 2 },
        // });

    }

    handleChangeTime = (dates, dateString) => {
        this.setState({
            // dataTime: dateString,
            searchFilters: {
                ...this.state.searchFilters,
                startDate: dates[0],
                endDate: dates[1],
            }
        })
    }

    handleSearchNameChange = (e) => {
        this.setState({
            searchFilters: {
                ...this.state.searchFilters,
                custName: e.target.value,
            }
        })
    }

    handleFormReset = () => {
        const { form, dispatch } = this.props;
        form.resetFields();
        this.setState({
            dataTime: [],
            value: '',
            dataTimeFlag: false,
            guaranteeKey: '',
            searchFilters: {
                ...this.state.searchFilters,
                custName: '',
                branchName: '',
                startDate: '',
                endDate: '',
            }
        });
        dispatch({
            type: 'pendingTask/fetch',
            payload: {
                offset: 0,
                limit: 10,
                state: 2,
            },
        });
    }

    handleSearch = (e) => {
        this.props.dispatch({
            type: 'pendingTask/fetch',
            payload: {
                offset: 0,
                limit: 10,
                state: 2,
                custName: this.state.searchFilters.custName,
                orgName: this.state.searchFilters.branchName,
                createTimeBegin: this.state.searchFilters.startDate,
                createTimeEnd: this.state.searchFilters.endDate,
            }
        });
    }

    renderOption = (data) => {
        const options = [];
        data.map((item) => {
            options.push(<Option value={item.id} key={item.id}>{item.merchantName}</Option>)
        })
        return options;
    }

    handleGuaranteeSelect = (value) => {
        // console.log("value", value)
        this.setState({
            guaranteeKey: value.key,
            searchFilters: {
                ...this.state.searchFilters,
                branchName: value.label,
            }
        })
    }

    columns = [{
        title: '业务编号',
        dataIndex: 'bizNum',
        key: 'bizNum',
    }, {
        title: '客户名称',
        dataIndex: 'custName',
        key: 'custName',
    }, {
        title: '担保机构名称',
        dataIndex: 'orgName',
        key: 'orgName',
    }, {
        title: '贷款金额',
        dataIndex: 'amount',
        key: 'amount',
    }, {
        title: '上报时间',
        dataIndex: 'finishTime',
        key: 'finishTime',
    }, {
        title: '目前任务',
        dataIndex: 'taskName',
        key: 'taskName',
    }, {
        title: '操作',
        render: (text, record) => {
            return (
                <Fragment>
                    <Link to={`/review/complete-apply-details/complete1?id=${record.id}&state=2&taskName=${record.taskName}`}>详情</Link>
                </Fragment>
            )
        },
    }];

    render() {
        const { pendingTask: { pendingList, page, loading } } = this.props;
        const { getFieldDecorator } = this.props.form;

        return (
            <PageHeaderLayout title="已办任务">
                {/* {JSON.stringify(pendingList)} */}
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            <Form layout="inline">
                                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                    <Col md={10} sm={24}>
                                        <FormItem label="客户名称">
                                            <Input placeholder="请输入" value={this.state.searchFilters.custName} onChange={this.handleSearchNameChange} />
                                        </FormItem>
                                    </Col>
                                    <Col md={10} sm={24}>
                                        <FormItem label="所属担保公司">
                                            <Select placeholder="请选择"
                                                style={{ width: '100%' }}
                                                labelInValue
                                                onChange={this.handleGuaranteeSelect}
                                                value={{ key: this.state.guaranteeKey }}
                                            >
                                                {this.state.guaranteeChannelList && this.renderOption(this.state.guaranteeChannelList)}
                                            </Select>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                                    <Col md={10} sm={24}>
                                        <FormItem label="上报时间">
                                            <div>
                                                <RangePicker
                                                    style={{ width: '100%' }}
                                                    allowClear={true}
                                                    showToday={true}
                                                    onChange={this.handleChangeTime}
                                                    value={[
                                                        this.state.dataTimeFlag ? null : this.state.searchFilters.startDate,
                                                        this.state.dataTimeFlag ? null : this.state.searchFilters.endDate
                                                    ]}
                                                    showTime={{ hideDisabledOptions: true }}
                                                    format="YYYY-MM-DD HH:mm:ss"
                                                />
                                            </div>
                                        </FormItem>
                                    </Col>
                                    <p style={{ textAlign: 'right' }}>
                                        <Button type="primary" onClick={this.handleSearch}>搜索</Button>
                                        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
                                    </p>
                                </Row>

                            </Form>
                        </div>
                        <Table
                            columns={this.columns}
                            dataSource={pendingList}
                            bordered
                            rowKey="id"
                            pagination={page}
                            loading={loading}
                            onChange={this.handleStandardTableChange}
                        />
                    </div>
                </Card>
            </PageHeaderLayout>
        );
    }
}
